<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hedy - Slides - {{ level }} </title>
    <link rel="stylesheet" href="{{static('css/reveal-js-custom.css')}}">
    <link rel="stylesheet" href="{{static('vendor/reveal/dist/reset.css')}}">
    <link rel="stylesheet" href="{{static('vendor/reveal/dist/reveal.css')}}">
    <link rel="stylesheet" href="{{static('vendor/reveal/dist/theme/sky.css')}}">

    <!-- Theme used for syntax highlighted code -->
    <link rel="stylesheet" href="{{static('vendor/reveal/plugin/highlight/monokai.css')}}">
</head>
<body>
    <div class="reveal">
      <div class="slides">
          {% for index, slide in slides.items() %}
            <section data-markdown style="text-align: left; height: 1018px; font-size:0.8em">
                {{ slide['header'] }}
                <textarea data-template>
                    ### {{ slide['header'] }}

                    {{ slide['text'] }}
                    {% if slide['code'] %}
                    <iframe class="fragment" src="/render_code/{{ level }}?code={{ slide['code'] | urlencode }}"></iframe>
                    {% endif %}
                    {% if slide['editor'] %}
                    <iframe class="fragment" src="{{ slide['editor'] }}"></iframe>
                    {% endif %}
                    <aside class="notes">{{ slide['notes'] }}</aside>
                </textarea>
            </section>
          {% endfor %}
      </div>
    </div>
    <script src="{{static('vendor/reveal/dist/reveal.js')}}"></script>
    <script src="{{static('vendor/reveal/plugin/notes/notes.js')}}"></script>
    <script src="{{static('vendor/reveal/plugin/markdown/markdown.js')}}"></script>
    <script src="{{static('vendor/reveal/plugin/highlight/highlight.js')}}"></script>
    <script>
        // More info about initialization & config:
        // - https://revealjs.com/initialization/
        // - https://revealjs.com/config/
        Reveal.initialize({
            hash: true,
            transition: 'none',
            slideNumber: true,
            keyboard: true,
            width: "90%",
            // Learn about plugins: https://revealjs.com/plugins/
            plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
        });
    </script>
</body>
</html>